<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>订单</title>
	 <link rel="stylesheet" href="<?php echo IMG_PATH ?>bdkd/css/reset.css">
     <link rel="stylesheet" href="<?php echo IMG_PATH ?>bdkd/css/ditu.css">
     <script src="<?php echo IMG_PATH ?>bdkd/js/flexible.js"></script>
     <script src="<?php echo IMG_PATH ?>bdkd/js/jquery-1.11.1.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>


    <!--     <script src="ditu_js/ditu.js"></script>-->
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		.BMap_stdMpZoom{
			position: absolute !important;
			top:-100px !important;
			left:-30px !important;
		}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=e3ZohdqyB0RL98hFOiC29xqh"></script>
	<title>多个标注点沿折线的轨迹运动</title>
</head>
<body>

    <input type="hidden" id="state" value="<?php echo $list['state']; ?>">

    <?php
    if($list['state']==3){
        ?>
        <input type="hidden" id="lat" value="
    <?php
        echo $list['lat'];
        ?>">

        <input type="hidden" id="lng" value="
    <?php
        echo $list['lng'];
        ?>">
        <input type="hidden" id="express_name" value="
    <?php
        echo $list['express_name'];
        ?>">

        <div class="xxy" style="">
            <input type="hidden" id="wlat" value="
    <?php
            echo $list['wlat'];
            ?>">

            <input type="hidden" id="wlng" value="
    <?php
            echo $list['wlng'];
            ?>">
        </div>
        <?
    }

    if($list['state']==2){
        ?>
        <input type="hidden" id="id" value="
    <?php
        echo $list['id'];
        ?>">
        <?php
    }
    ?>
<input type="hidden" id="time" value="
<?php

if(!empty($list['time'])){
echo $list['time'];
}
?>
">
    <input type="hidden" id="id" value="
<?php

    if(!empty($list['id'])){
        echo $list['id'];
    }
    ?>
">
    <input type="hidden" id="type" value="
<?php

    if(!empty($list['type'])){
        echo $list['type'];
    }
    ?>
">
    <div class="meiyongde"></div>
	<div id="allmap">
        

    </div>
	
	<div id="wrapper">
       <nav id="nav">
           <a href="<?php echo SITE_PATH ?>work/borders/untreated">
               <div class="nav_left nav_bar">
                   待处理订单
               </div>
           </a>
            <a href="<?php echo SITE_PATH?>work/borders/order">
                <div class="nav_right nav_bar">
                    已处理订单
                </div>
            </a>

       </nav>


       <div class="fucen">
         <div class="touxiang" >
           <img src="<?php echo IMG_PATH ?>bdkd/img/at.png" height="156" width="156" alt="">
         </div>
         <p>正在等待<?php echo $list['type'];?>

             <?php if(!empty($list['type'])){
                 $type=$list['type'];

                 if($type=="0"){
                     ?>代取员<?php
                 }elseif ($type=="1"){
                     ?>快递员<?php
                 }else{
                     ?>托运员<?php
                 }
             }

              ?>接单</p>
         <h1>倒计时:<i class="fen">0</i>分<i class="miao">0</i>秒</h1>
         <div class="qxdd" onclick="upstate()">
           取消订单
         </div>
      </div>

        <!-- 如果三分钟内没接单这个弹出 -->
          <div class="fucen1">
            <div class="pic-beijing">
              <img src="<?php echo IMG_PATH ?>bdkd/img/组-35@2x.png" alt="">
            </div>
             <p>非常抱歉,</p>
             <p>当前时间附近没有代取员,</p>
             <p>请换个时间代取.</p>
             <div class="qxdd2">
               确定
             </div>
          </div>
        <!-- 如果三分钟内没接单这个弹出 -->

        <!-- 如果三分钟之内接单以后弹出 -->
        <div class="fucen2">
            <div class="touxiang">
                <div class="bug">
                    <div class="touxiang1">
                        <div class="touxiang2">
                            <img src="<?php echo IMG_PATH ?>bdkd/img/平台@2x.png" alt="">
                        </div>
                    </div>
                    <a href="tel:" style="text-decoration:none;" class="dianhua">
                        <img src="<?php echo IMG_PATH ?>bdkd/img/组-33@2x.png" alt="">
                    </a>
                </div>

            </div>
            <p>代取员刘二兵已接单</p>
            <p>请耐心等待</p>
            <h1>倒计时:<i class="fen1">0</i>分<i class="miao1">0</i>秒</h1>
            <div class="qxdd1">
                确定
            </div>
        </div>
        <!-- 如果三分钟之内接单以后弹出 -->

        

    </div>

	<div class="flooter">
		<ul>

			<li>
				<a href="<?php echo SITE_PATH?>work/bpost/success">
					<img src="<?php echo IMG_PATH ?>bdkd/img/shouye-z@2x.png"/>
					<p>首页</p>
				</a>
			</li>


			<li>
				<a href="<?php echo SITE_PATH?>work/borders/untreated">
					<img src="<?php echo IMG_PATH ?>bdkd/img/js-two@2x.png" height="42" width="42" />
					<p class="color">订单</p>
				</a>
			</li>


			<li>
				<a href="<?php echo SITE_PATH?>work/buser/userInfo">
					<img src="<?php echo IMG_PATH ?>bdkd/img/rt-one@2x.png" height="42" width="42" />
					<p>我的</p>
				</a>
			</li>

		</ul>
	</div>
</body>
</html>
<script type="text/javascript">

//	setInterval(function(){
//		window.location.reload();
//	},3000);


	//var afterUrl = $("#state").val();
    /*var time=$("#time").val();
    console.log(time);*/
    var id=Number($("#id").val());
    var type=$("#type").val();
    var state=$("#state").val();
	//alert(state);
    //快递公司名
    var subsidiary=$("#express_name").val();

   // console.log(typeof state);
    var wlat=Number($("#wlat").val());//快递员纬度
	console.log(wlat);
    var wlng=Number($("#wlng").val());//快递经度
	// console.log(wlng);
	var warea = Number($(".xxy").html());
//    console.log(typeof warea);
//    console.log(warea);
    //alert(state);
    warea1 = eval('(' + warea + ')');

	//alert(warea1);
	//console.log(typeof warea1);
	//alert(warea);
    window.onload=window.onresize=function(e){
 
	    if(state=='1'){
	       // alert(55);
			jds();//未下单用户坐标
		}else if(state=='2'){
//	        alert(00);
			$('.fucen').css('display','block');
			add();//等待接单
		}else if(state=='3'){
            jdkdy();//接单后
			$('.fucen').css('display','none');
            $('.fucen2').css('display','block');
		}
    }
	function bd_encrypt(gg_lon, gg_lat){
		var X_PI = Math.PI * 3000.0 / 180.0;
		var x = gg_lon, y = gg_lat;
		var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
		var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
		var bd_lon = z * Math.cos(theta) + 0.0065;
		var bd_lat = z * Math.sin(theta) + 0.006;
		return {
			bd_lat: bd_lat,
			bd_lon: bd_lon
		};
	}

	var result=bd_encrypt(wlng,wlat);
	wlat=result.bd_lat;
	wlng=result.bd_lon;
	// 百度地图API功能
	var KDZB = [wlng,wlat];
	/*
		{'lat':'wlat','lng':'wlng'}
		{'lat':'116.325422','lng':'39.956292'},
		{'lat':'116.357042','lng':'39.99787'},
		{'lat':'116.367966','lng':'39.958504'}
	];
*/
	
	// console.log(zuobiaojihe[0]);
	// console.log(KDZB[0][0].lng);
    //用户经纬度
    var lat=Number($("#lat").val());
    var lng=Number($("#lng").val());
   // console.log(typeof lng);


    //alert(typeof lng);
	
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.3,39.9), 12);
	var top_left_navigation = new BMap.NavigationControl(); 
	map.addControl(top_left_navigation);
	var bounds = null;
	var linesPoints = null;

	var yhresult=bd_encrypt(lng,lat);
	lat=yhresult.bd_lat;
	lng=yhresult.bd_lon;
	var YHZB = [lng,lat];

	// console.log(spoi1);

	// var spoi2 = new BMap.Point(116,50);
	var epoi  = new BMap.Point(YHZB[0],YHZB[1]); 

 	var afterUrl =  window.location.search.substring(1);
	function jdkdy(){//接单后

		function initLine(){
			bounds = new Array();
			linesPoints = new Array();
			map.clearOverlays(); 
			for(var i=0;i<KDZB.length;i++){
				var spoi1 = new BMap.Point(KDZB[0],KDZB[1]);
				// console.log(spoi1);
				var driving1 = new BMap.DrivingRoute(map,{onSearchComplete:drawLine});
				driving1.search(spoi1, epoi);
				var opts = {
				  position : spoi1,    // 指定文本标注所在的地理位置
				  offset   : new BMap.Size(30, -30)    //设置文本偏移量
				}
				var label = new BMap.Label(subsidiary, opts);  // 创建文本标注对象
				label.setStyle({
					 color : "#333",
					 fontSize : "12px",
					 border:"none",
					 padding:" 0 10px",
					 lineHeight : "26px",
					 fontFamily:"微软雅黑"
				 });
				map.addOverlay(label);  
			}                             
		}
		function run(){

			for(var m = 0;m < linesPoints.length; m++){
				var pts = linesPoints[m];
				// console.log(pts);
				var len = pts.length;
				// console.log(len);
				var carMk = new BMap.Marker(pts[0],{icon:myIcon});
				console.log(carMk);
				map.addOverlay(carMk);
				resetMkPoint(1,len,pts,carMk)
			}
			
			function resetMkPoint(i,len,pts,carMk){
				carMk.setPosition(pts[i]);
				if(i < len){
					setTimeout(function(){
						i++;
						resetMkPoint(i,len,pts,carMk);
					},100);
				}
			}
			
		}
		function drawLine(results){

			var opacity = 0.45;
			var planObj = results.getPlan(0);
			var b = new Array();
			var addMarkerFun = function(point,imgType,index,title){
				
				var url;
				var width;
				var height
				var myIcon;
				// imgType:1的场合，为起点和终点的图；2的场合为车的图形
				// var imgType=2;
				// alert(imgType);
				if(imgType == 1){
					// console.log(imgType);
					url = "<?php echo IMG_PATH ?>bdkd/img/lt.png";
					width = 46;
					height = 45;
					myIcon = new BMap.Icon(url,new BMap.Size(width, height),{offset: new BMap.Size(14, 32),imageOffset: new BMap.Size(-5, 0 - index * height)});
				}else if(imgType == 2){
					// console.log(imgType);
					url = "<?php echo IMG_PATH ?>bdkd/img/ht.png";
					width = 46;
					height = 45;
					// var d = 55;
					// var cha = 0;
					// var jia = 0;
					// if(index == 2){
					// 	d = 21;
					// 	cha = 5;
					// 	jia = 1;
					// }
					myIcon = new BMap.Icon(url,new BMap.Size(width, height),{offset: new BMap.Size(1000, 32),imageOffset: new BMap.Size(-5, 0 - index * height)});
					/*myIcon = new BMap.Icon(url,new BMap.Size(width, d),{offset: new BMap.Size(14, (52 + jia)),imageOffset: new BMap.Size(20, 50 * height)});*/
				}
				
				var marker = new BMap.Marker(point, {icon: myIcon});
				if(title != null && title != ""){
					marker.setTitle(title);
				}
				// 起点和终点放在最上面
				if(imgType == 1){
					marker.setTop(true);
				}
				map.addOverlay(marker);
			}
			var addPoints = function(points){
				for(var i = 0; i < points.length; i++){
					bounds.push(points[i]);
					b.push(points[i]);
				}
			}	
			// 绘制驾车步行线路
			for (var i = 0; i < planObj.getNumRoutes(); i ++){
				var route = planObj.getRoute(i);
				if (route.getDistance(false) <= 0){continue;}
				addPoints(route.getPath());
				// 驾车线路
				// if(route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING){
				// 	map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#0030ff",strokeOpacity:opacity,strokeWeight:6,enableMassClear:true}));
				// }else{
				// // 步行线路有可能为0
				// 	map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#30a208",strokeOpacity:0.75,strokeWeight:4,enableMassClear:true}));
				// }
			}	
			map.setViewport(bounds);	
			// 终点
			addMarkerFun(results.getEnd().point,2,0);
			// 开始点
			addMarkerFun(results.getStart().point,1,0);
			linesPoints[linesPoints.length] = b;
		}
		initLine();
		setTimeout(function(){
			run();
		},1000);
	}
    /*三分钟内接单后后弹出层的js*/

    // 获取当前时间戳(以s为单位)
        var timestamp1 = Date.parse(new Date());
        timestamp1 = timestamp1 / 1000;
    //接到单的时间
        var time1 = Number($('#time').val());//后台传的时间
        var daojishi1 = 3600-(timestamp1-time1);
            // console.log(daojishi1);
        if(daojishi1<=1){
            clearInterval(dingshiqi1);
            // $('.fucen2').css('display','none');
            $('.fucen2').remove();
        }else{
            
            var minutes1 = parseInt(daojishi1 / 60); //算出当前还剩多少分钟
            var second1 = daojishi1 % 60;   //算出当前还剩多少秒
            $('.fen1').html(minutes1);  //写到html当中去
            $('.miao1').html(second1);
            var F1 = minutes1;
            var M1 = second1;
            var dingshiqi1 = setInterval(function () {

                // console.log(M1);

                M1 -= 1;
                if (F1 <= 0 && M1 <= 0) {
                    M1 = 0;
                    F1 = 0;
                    clearInterval(dingshiqi1);
                    $('.fucen2').css('display','none');
                    //如果这个时候还没把东西送给客户就发推送消息
                }
                if (F1 <= 0) {
                    F1 = 0;
                }
                if (M1 <= 0) {
                    M1 = 60;
                    M1 -= 1;
                }
                $('.miao1').html(M1);
                $('.fen1').html(F1);
            }, 1000)
            $('.qxdd1').click(function(){
                var newNode = $("<div class='newNode'><div class='newNode1'><i>代取员</i>:<i>刘二兵</i></div><div class='newNode2'><i class='fen2'>"+F1+"</i>分<i class='miao2'>"+M1+"</i>秒</div><img src='<?php echo IMG_PATH ?>bdkd/img/phone100.png'></div>");
                $('#allmap').append(newNode);
                $('.fucen2').css('display','none');
                var F2 = F1;
                var M2 = M1;
                var dingshiqi2 = setInterval(function () {

                    // console.log(M1);

                    M2 -= 1;
                    if (F2 <= 0 && M2 <= 0) {
                        M2 = 0;
                        F2 = 0;
                        clearInterval(dingshiqi2);
                        $('.fucen2').css('display','none');
                        //如果这个时候还没把东西送给客户就发推送消息
                    }
                    if (F2 <= 0) {
                        F2 = 0;
                    }
                    if (M2 <= 0) {
                        M2 = 60;
                        M2 -= 1;
                    }
                    $('.miao2').html(M2);
                    $('.fen2').html(F2);
                }, 1000)
            })

        }
    /*三分钟内接单后后弹出层的js*/



	function add(){
        // 获取当前时间戳(以s为单位)
        var timestamp = Date.parse(new Date());
        timestamp = timestamp / 1000;
        //接单时间
        var time = Number($('#time').val());
        //开始倒计时的时间
        var daojishi = 180-(timestamp-time);
        console.log(daojishi);
        if(daojishi<=0){
            clearInterval(dingshiqi);

            $.ajax({
                // 请求发送方式
                type: 'post',
                // 验证文件
                url: '<?php echo SITE_PATH ?>work/borders/upOrder',
                dataType:'json',
                // 用户输入的帐号验证码
                data: {
                    'id': id
                },
                success: function(data){
                    $('.fucen').css('display','none');
                    $('.fucen1').css('display','block');
                    $('.qxdd2').click(function(){
                        $('.fucen1').css('display','none');
                    })
                },
                error: function(){
                    alert('抱歉，附近没有接单员,请换个时间段!');
                }

            })


        }
        else {
            var minutes = parseInt(daojishi / 60);
            var second = daojishi % 60;
            $('.fen').html(minutes);
            $('.miao').html(second);
            var F = minutes;
            var M = second;


            var dingshiqi = setInterval(function () {

                console.log(M);

                M -= 1;
                if (F <= 0 && M <= 0) {
                    M = 0;
                    F = 0;
                    clearInterval(dingshiqi);
                    // alert('抱歉，附近没有接单员,请换个时间段');
                    $('.fucen').css('display', 'none');
                    $('.fucen1').css('display','block');
                    $('.qxdd2').click(function(){
                        $('.fucen1').css('display','none');
                    })
                }
                if (F <= 0) {
                    F = 0;
                }
                if (M <= 0) {
                    M = 60;
                    F -=1;
                    M -= 1;
                }
                $('.miao').html(M);
                $('.fen').html(F);

            }, 1000)

        }




	}

    function upstate() {

            var id=Number($("#id").val());
//		alert(id);
//		console.log(id);
//            alert(id);
           // return false;
            $.ajax({
                // 请求发送方式
                type: 'post',
                // 验证文件
                url: '<?php echo SITE_PATH ?>work/borders/upOrder',
                dataType:'json',
                // 用户输入的帐号验证码
                data: {
                    'id': id
                },
                success: function(data){
//                console.log(data);
                    if(data.result==1){
                        alert('取消订单成功!');
                        window.location.href = '<?php echo SITE_PATH ?>work/borders/untreated';
                    }else {
                        // alert(data.msg);
						window.location.href = '<?php echo SITE_PATH ?>work/borders/untreated';
                    }
                },
                error: function(){
                    alert('取消订单失败!');
                }

            })
    }
    //百度地图坐标 转换到 火星坐标
    function bd_decrypt(bd_lon,bd_lat) {
//	    alert(888);
//	    alert(bd_lon);alert(bd_lat);alert(555);
        var X_PI = Math.Pi * 3000.0 / 180.0;
        var x = bd_lon - 0.0065;
        var y = bd_lat - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
        var gg_lon = z * Math.cos(theta);
        var gg_lat = z * Math.sin(theta);
//        alert(gg_lon);alert(gg_lon);
        return {
            lng: gg_lon,
            lat: gg_lat
        }
    }

    function jds(){

        wx.config({
            debug: false,
            appId: '<?php
                    if(!empty($list['signPackage'])){
                        echo $list['signPackage']["appId"];
                    }
                ?>',
            timestamp:'<?php
                if(!empty($list['signPackage'])){
                echo $list['signPackage']["timestamp"];
            } ?>',
            nonceStr: '<?php
                if(!empty($list['signPackage'])){
                    echo $list['signPackage']["nonceStr"];
                }

                ?>',
            signature: '<?php
                if(!empty($list['signPackage'])){
                    echo $list['signPackage']["signature"];
                }

                ?>',
            jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
                'getLocation'
            ]
        });

        wx.ready(function () {
            wx.getLocation({
                type: 'wgs84',
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度
                   /* alert(res.latitude);
                    alert(res.longitude);
                    alert(res.accuracy);*/

					
                    var addres=bd_encrypt(longitude,latitude);

                    var a = addres.bd_lon;
                    var b = addres.bd_lat;
                    console.log(a);
                    console.log(b);
                    var mp = new BMap.Map("allmap");//创建地图实例
                    mp.centerAndZoom(new BMap.Point(a,b), 15);
                    ////地图初始化，设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作
                    // 复杂的自定义覆盖物
                    function ComplexCustomOverlay(point){
                        this._point = point;

                    }
                    ComplexCustomOverlay.prototype = new BMap.Overlay();
                    ComplexCustomOverlay.prototype.initialize = function(map){
                        this._map = map;
                        var div = this._div = document.createElement("div");
                        div.style.position = "absolute";
                        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);//聚合功能?
                        div.style.height = "45px";
                        div.style.width="45px";

                        var arrow = this._arrow = document.createElement("img");
                        arrow.src = "<?php echo IMG_PATH ?>bdkd/img/ht.png";
                        arrow.style.width = "45px";
                        arrow.style.height = "45px";
                        arrow.style.top = "22px";
                        arrow.style.left = "10px";
                        div.appendChild(arrow);


                        mp.getPanes().labelPane.appendChild(div);//getPanes(),返回值:MapPane,返回地图覆盖物容器列表  labelPane呢???

                        return div;

                    }

                    ComplexCustomOverlay.prototype.draw = function(){
                        var map = this._map;
                        var pixel = map.pointToOverlayPixel(this._point);
                        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
                        this._div.style.top  = pixel.y - 30 + "px";
                    }




                    var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(a,b));

                    mp.addOverlay(myCompOverlay);//将标注添加到地图中

                },
                cancel: function (res) {
                    alert('用户拒绝授权获取地理位置');
                }
            });
        });
	}

	
</script>

